<template>
    <div class="screen_block_box flex-column">
        <h2 class="header">月报警类型统计</h2>
        <div class="alarm_chart" ref="alarm_bar"></div>
    </div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteAlarmStatistics} from '@/api/home'

export default {
    name: 'AlarmBar',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initEchart();
                var ev = document.createEvent('Event');
                ev.initEvent('resize', true, true);
                window.dispatchEvent(ev);
            }, 10);
        });
    },
    methods: {
        async initEchart() {
            let res = await remoteAlarmStatistics();
            let {data} = res;
            let xData = [],
                yData = [];

            data.map(function (a, b) {
                xData.push(a.typeName);
                yData.push(a.cnt);
            });
            this.myChart = echarts.init(this.$refs.alarm_bar);
            this.myChart.setOption(
                {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        formatter: function (params) {
                            return params[0].name+'：' + params[0].data;
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '0%',
                        bottom: '5%',
                        top: '7%',
                        height: '85%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            gridIndex: 0,
                            data: xData,
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine: {
                                lineStyle: {
                                    type:'dashed',
                                    color: '#015973'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: '#23cdff',
                                fontSize: 10
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            gridIndex: 0,
                            splitLine: {
                                lineStyle: {
                                    type:'dashed',
                                    color: '#015973'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#23cdff'
                                }
                            },
                            // axisLabel: {
                            //     color: 'rgb(170,170,170)',
                            //     formatter: '{value} %'
                            // }
                        },
                    ],
                    series: [
                        {
                            name: '合格率',
                            type: 'bar',
                            barWidth: '20%',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [15, 15, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#00feff'
                                        },
                                        {
                                            offset: 0.5,
                                            color: '#027eff'
                                        },
                                        {
                                            offset: 1,
                                            color: '#0286ff'
                                        }
                                    ])
                                }
                            },
                            data: yData,
                            zlevel: 11
                        }
                    ]
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.alarm_chart {
    width: 100%;
    height: 100%;
}
</style>